<template>
    <div class="all">
        <van-nav-bar
                title="我的银行卡"
                left-arrow
                @click-left="onClickLeft"
        />
        <van-row>
            <van-col span="22" offset="1">
                <div class="bankcard">
                    <p class="mybank">我的银行卡</p>
                    <p class="banknum">{{ cardid }}</p>
                    <p class="bankname">{{ name }}</p>
                </div>
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around" style="margin-top: 20px;">
            <van-col span="10">
                <van-button type="warning " style="width: 100%" :to="{name : 'user-addbank'}">添加银行卡</van-button>
            </van-col>
            <van-col span="10">
                <van-button type="warning " style="width: 100%"
                            :to="{name : 'user-bankupdate', params: { bankid: this.bankid}}">修改银行卡
                </van-button>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import {banklist} from '@/api/api';

    export default {
        name: "banklist",
        data() {
            return {
                name: '',
                cardid: '',
                bankid: '',
            }
        },
        created() {
            this.list()
        },
        methods: {
            onClickLeft() {
                history.go(-1)
            },
            list() {
                banklist({})
                    .then(res => {
                        this.name = res.data.data[0].name
                        this.bankid = res.data.data[0].id
                        this.cardid = res.data.data[0].bankNo.replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 ');
                    })
                    .catch(error => {
                        this.$router.push({name: 'user-addbank'})
                    })
            }
        }
    }
</script>

<style scoped>
    .all {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
    }

    .bankcard {
        height: 200px;
        background-image: linear-gradient(160deg, #E88785 20%, #E67770 80%);
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
        border-radius: 5px;
        overflow: hidden;
        margin-top: 20px;
        position: relative;
        color: #ffffff;
    }

    .banknum {
        width: 100%;
        position: absolute;
        top: 70px;
        font-size: 26px;
        color: #ffffff;
        text-align: center;
    }

    .bankname {
        position: absolute;
        bottom: 40px;
        right: 40px;
    }

    .mybank {
        position: absolute;
        top: 20px;
        left: 20px;
        color: #ffffff;
    }
</style>